<template>
  <div class="pagebox">
    <crumbs @goBack="goBack" :superiorMenu="['生产']" currentMenu="报工工作台"></crumbs>
    <div class="title">
      <div class="title-box">报工工作台</div>
      <div class="icon-right"><a-icon class="title-icon" type="fullscreen" /></div>
    </div>
    <div class="card">
      <div class="card-left">
        <div class="card-title">生产任务</div>
        <div class="card-content">
          <div class="c-card">
            <div class="c-title">GD202312030001</div>
            <div class="c-yang">工序03</div>
            <div class="c-yang">计划数:</div>
            <div class="c-yang">2023-08-22 12:12~2023-08-23 12:12</div>
          </div>

        </div>
      </div>
      <div class="card-centent">
        <div class="card-title">快速报工</div>
        <div class="card-content">
          <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-model-item label="工单编号">
              <a-input v-model="form.name" placeholder="请选择" />
            </a-form-model-item>
            <a-form-model-item label="工序">
              <a-input v-model="form.name" placeholder="请选择" />
            </a-form-model-item>
            <a-form-model-item label="操作人">
              <a-input v-model="form.name" placeholder="请选择" />
            </a-form-model-item>
            <a-form-model-item label="合格数">
              <a-input v-model="form.name" placeholder="请选择" />
            </a-form-model-item>
            <a-form-model-item label="不合格数">
              <a-input v-model="form.name" placeholder="请选择" />
            </a-form-model-item>
            <a-form-model-item label="不合格原因">
              <a-input v-model="form.name" placeholder="请选择" />
            </a-form-model-item>
            <a-form-model-item label="报工时间">
              <a-input v-model="form.name" placeholder="请选择" />
            </a-form-model-item>
            <a-form-model-item label="不合格原因">
              <a-input v-model="form.name" placeholder="请选择" />
            </a-form-model-item>
          </a-form-model>
        </div>

        <div class="centent-btn">
          <a-button size="Large" style="width: 119px; height: 45px; ">清空</a-button>
          <a-button size="Large" style="width: 397px; height: 45px;" type="primary"> 提交 </a-button>
        </div>
      </div>
      <div class="card-right">
        <div class="card-title">今日报工</div>
        <div class="card-content">
          <div class="c-card">
            <div class="c-title">GD202312030001</div>
            <div class="c-yang">工序03</div>
            <div class="c-yang">计划数:</div>
            <div class="c-yang">2023-08-22 12:12~2023-08-23 12:12</div>
          </div>

        </div>
      </div>
      <div></div>
      <div></div>
    </div>
  </div>
</template>

<script>
import crumbs from '@/components/crumbs.vue'
export default {
  components: {
    crumbs,
  },
  data () {
    return {
      form: ''
    }
  },
  methods: {
    goBack () {
      this.$router.push({ name: 'home' });
    }
  }
}
</script>

<style lang="less" scoped>
.pagebox {
  height: calc(100vh - 130px);

  .title {
    background: white;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title-box {
      margin-left: 10px;
      padding: 5px 10px;
      font-size: 16px;
      font-weight: bold;
      color: #0079FE;
      position: relative;

      &:after {
        content: '';
        position: absolute;
        display: block;
        width: 100%;
        height: 2px;
        left: 0;
        background: #0079FE;
        bottom: -4px;
      }

    }

    .icon-right {
      padding-top: 5px;
      margin-right: 20px;
    }

    .title-icon {
      font-size: 20px;
      color: #999;

    }
  }
}

.card {
  margin-top: 10px;
  height: calc(100% - 50px);
  display: flex;

  .card-right {
    background: white;
    width: 200px;
    height: 100%;
    padding: 5px 10px;
    display: flex;
    flex-direction: column;

    .card-title {
      font-size: 20px;
      color: #333;
    }

    .card-content {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;

      .c-card {
        margin: 10px 0;
        border: 1px solid rgba(43, 133, 228, 1);
        padding: 0 5px;

        div {
          font-size: 14px;
          margin: 5px 0;
          color: black;
          white-space: pre-wrap;

        }

        .c-title {
          font-size: 16px;
          color: #333;
        }
      }

    }
  }

  .card-centent {
    flex: 1;
    margin: 0 5px;
    background: white;
    height: 100%;
    padding: 5px 10px;
    position: relative;
    display: flex;
    flex-direction: column;

    .card-content {
      overflow-y: auto;
      overflow-x: hidden;
      flex: 1;
      padding-bottom: 80px;
    }

    .card-title {
      font-size: 20px;
      color: #333;
    }

    .centent-btn {
      width: 100%;
      bottom: 0;
      position: absolute;
      padding: 10px 0;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      background: white;
    }
  }

  .card-left {
    background: white;
    width: 200px;
    height: 100%;
    padding: 5px 10px;
    display: flex;
    flex-direction: column;

    .card-title {
      font-size: 20px;
      color: #333;
    }

    .card-content {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;

      .c-card {
        margin: 10px 0;
        border: 1px solid rgba(255, 153, 0, 1);
        padding: 0 5px;

        div {
          font-size: 14px;
          margin: 5px 0;
          color: black;
          white-space: pre-wrap;

        }

        .c-title {
          font-size: 16px;
          color: #333;
        }
      }

    }
  }
}</style>